<template>
  <div>
    <BasicModal v-bind="$attrs" destroyOnClose :title="title" :width="640" @register="registerModal" @ok="handleSubmit">
    <div class="form-container max-w-screen-lg py-4">
      <a-form ref="formRef" :model="formModel" :rules="validatorRules" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="通知标题" v-bind="validateInfos.noticeName">
          <a-input v-model:value="formModel.noticeName" :disabled="action!='add' && action!='edit'" placeholder="请输入分类名称" />
        </a-form-item>
        <a-form-item label="通知内容" v-bind="validateInfos.noticeContent" help="该内容为H5端显示内容，请简要说明相关内容">
          <a-textarea v-model:value="formModel.noticeContent" :disabled="action!='add' && action!='edit'" style="height:120px;" placeholder="请输入内容" />
        </a-form-item>
        <a-form-item label="排序权重" help="数字越小排在越前面，请合理设置数字">
          <a-input-number v-model:value="formModel.sortNo" :disabled="action!='add' && action!='edit'" placeholder="请输入排序权重" />
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <a-space v-if="action == 'add' || action == 'edit'">
        <a-button type="default" @click="closeModal">取消</a-button>
        <a-button type="primary" :loading="isLoading" :disabled="action!='add' && action!='edit'" @click="handleSubmit">
          {{ isLoading ? '提交中...' : '提交' }}</a-button>
      </a-space>
      <a-space v-if="action == 'auth'">
        <a-button type="error" :loading="isLoading" @click="handleAuthNoPass">
          审核不通过</a-button>
        <a-button type="primary" :loading="isLoading" @click="handleAuthPass">
          审核通过</a-button>
      </a-space>
    </template>
  </BasicModal>
  <reasonModal @register="registerReasonModal" @success="handleNoPassSubmit" />
  </div>
  
</template>

<script lang="ts" setup>
  import { ref, computed, reactive, unref } from 'vue';
  import { Form, Modal } from 'ant-design-vue';
  import { useDebounceFn } from '@vueuse/core';
  import { BasicModal, useModal, useModalInner } from '/src/components/Modal';
  import { BasicForm, useForm } from '/src/components/Form';
  import { formSchema } from '../list.data';
  import { saveOrUpdate, auth } from '../list.api';
  import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
  import reasonModal from '/@/components/Extend/reasonModal.vue';

  //注册model
  const [registerReasonModal, { openModal: openReasonModal }] = useModal();
  // Emits声明
  const emit = defineEmits(['register', 'success']);
  const isUpdate = ref(true);
  const isDetail = ref(false);
  const formRef = ref();
  const action = ref('add');
  const isLoading = ref(false);
  const treeData = ref([]);
  let formModel = ref({
    id: null,
    noticeName: '',
    noticeContent: '',
    sortNo: 0,
  });
  const validatorRules = reactive({
    noticeName: [
      { required: true, message: '请输入标题' },
    ],
    noticeContent: [{ required: true, message: '请输入简要内容' }],
    // 其他字段的验证规则...
  });
  //设置标题
  const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(isDetail) ? '详情' : '编辑'));

  //表单配置
  const useForm = Form.useForm;
  const { resetFields, validate, validateInfos, clearValidate } = useForm(formModel.value, validatorRules, { immediate: false });

  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    await resetFields();
    setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
    isUpdate.value = !!data?.isUpdate;
    isDetail.value = !!data?.showFooter;
    action.value = data?.action;
    if (unref(isUpdate)) {
      //表单赋值
      formModel.value = Object.assign(formModel.value, data.record);
      console.log("formModel.value:",formModel.value)
      
    }
    setTimeout(async () => {
      await clearValidate();
    }, 50);
    
    // 隐藏底部时禁用整个表单
    //setProps({ disabled: !data?.showFooter })
  });

  const debouncedFn = useDebounceFn(async () => {
    formRef.value.validate().then(async () => {
      try {
        setModalProps({ confirmLoading: true });
        //提交表单
        await saveOrUpdate(formModel.value, isUpdate.value);
        //关闭弹窗
        closeModal();
        //刷新列表
        emit('success');
      } finally {
        setModalProps({ confirmLoading: false });
        formModel.value = {
          id: null,
          noticeName: '',
          noticeContent: '',
          sortNo: 0,
        };
      }
    });
  }, 1000);

  //表单提交事件
  async function handleSubmit() {
    await validate();
    setModalProps({ confirmLoading: true });
    debouncedFn();
  }

  const debouncedFnAuth = useDebounceFn(async (params) => {
    try {
      isLoading.value = true;
      //提交表单
      await auth(params);

      //关闭弹窗
      closeModal();
      //刷新列表
      emit('success');
    }finally {
      setModalProps({ confirmLoading: false });
      isLoading.value = false;
      formModel.value = {
        id: null,
        slideshowName: '',
        slideshowUrl: '',
        sortNo: 0,
      };
    }
  })
  async function handleNoPassSubmit(data){
    setModalProps({ confirmLoading: true });
    let params = {
      checkStatus: -1,
      id: formModel.value.id,
      checkRemark: data.reason,
    }
    console.log("params:",params)
    debouncedFnAuth(params);
  }
  // 审核不通过
  async function handleAuthNoPass() {
    openReasonModal(true, {
      showFooter: true,
    });
  }
  // 审核通过
  async function handleAuthPass() {
    setModalProps({ confirmLoading: true });
    let params = {
      id: formModel.value.id,
      checkStatus: 1,
    }
    debouncedFnAuth(params);
  }
</script>

<style lang="less" scoped>
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
</style>
../list.data
../list.api
